<template>
  <div class="step1-dlp">
    <a-form-item
      label="DLP Event ID"
      :label-col="{ span: 3 }"
      :wrapper-col="{ span: 9 }"
      labelAlign="left"
    >
      <a-input
        :placeholder="$t('breach.steps.step1.content.form.tip')"
        v-decorator="[
          'EventDlpId',
          {
            rules: [
              {
                required: true,
                message: $t('breach.steps.step1.content.form.tip'),
              },
            ],
          },
        ]"
        :disabled="!ifCanEdit"
      ></a-input>
    </a-form-item>
    <a-form-item
      :label="$t('breach.steps.step1.content.form.table.title')"
      :required="true"
    >
      <a-table :dataSource="listData" size="small">
        <a-table-column key="No" title="No" align="center">
          <template slot-scope="text, record, ind">
            {{ ind + 1 }}
          </template>
        </a-table-column>
        <a-table-column
          key="SupplementDetailName"
          width="240px"
          :title="$t('breach.steps.step1.content.form.table.name')"
          align="center"
        >
          <template slot-scope="text, record">
            <a-select
              :placeholder="$t('breach.steps.step1.content.form.tip1')"
              v-model="record.SupplementDetailName"
              show-search
              @search="getUsers"
              @change="(...rest) => getDetails(record.Id, ...rest)"
              :disabled="!ifCanEdit"
            >
              <a-select-option
                v-for="item in userList"
                :value="item.value"
                :key="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </template>
        </a-table-column>
        <a-table-column
          key="SupplementDetailEmail"
          :title="$t('breach.steps.step1.content.form.table.email')"
          align="center"
        >
          <template slot-scope="text, record">
            <a-input
              v-model="record.SupplementDetailEmail"
              :placeholder="$t('breach.steps.step1.content.form.tip')"
              :disabled="!ifCanEdit"
            >
            </a-input>
          </template>
        </a-table-column>
        <a-table-column
          key="SupplementDetailPersonnelId"
          :title="$t('breach.steps.step1.content.form.table.userid')"
          align="center"
        >
          <template slot-scope="text, record">
            <a-input
              v-model="record.SupplementDetailPersonnelId"
              :placeholder="$t('breach.steps.step1.content.form.tip')"
              :disabled="!ifCanEdit"
            >
            </a-input>
          </template>
        </a-table-column>
        <a-table-column
          key="SupplementDetailResponsibleEmail"
          :title="$t('breach.steps.step1.content.form.table.leader')"
          align="center"
        >
          <template slot-scope="text, record">
            <a-input
              v-model="record.SupplementDetailResponsibleEmail"
              :placeholder="$t('breach.steps.step1.content.form.tip')"
              :disabled="!ifCanEdit"
            >
            </a-input>
          </template>
        </a-table-column>
        <a-table-column
          key="operate"
          :title="$t('app.setting.othersettings')"
          align="center"
        >
          <template slot-scope="text, record">
            <a-button
              type="link"
              @click="delRow(record.Id)"
              :disabled="!ifCanEdit"
              >{{ $t("menu.exception.trigger") }}</a-button
            >
          </template>
        </a-table-column>
        <div slot="footer">
          <a-button
            icon="plus"
            size="small"
            @click="addRow"
            :disabled="!ifCanEdit"
            >{{ $t("breach.steps.step1.content.form.table.add") }}</a-button
          >
        </div>
      </a-table>
    </a-form-item>
  </div>
</template>

<script>
import { getUserList } from "@/api/common/form";
export default {
  name: "step1Dlp",
  props: ["ifCanEdit", "initData"],
  data() {
    return {
      listData: [],
      userList: [],
    };
  },
  mounted() {
    this.getUsers();
  },
  watch: {
    initData: {
      handler(newVal) {
        this.listData = newVal || [];
      },
      immediate: true,
    },
  },
  methods: {
    async getUsers(value) {
      const { data } = await getUserList({ UserEmail: value, UserName: value });
      this.userList = data;
    },
    delRow(Id) {
      this.listData = this.listData.filter((item) => item.Id !== Id);
    },
    addRow() {
      this.listData.push({
        Id: +new Date(),
        SupplementDetailName: undefined,
        SupplementDetailEmail: "",
        SupplementDetailPersonnelId: "",
        SupplementDetailResponsibleEmail: "",
      });
    },
    // 获取对应 邮箱/人员/直管负责人
    getDetails(Id, value) {
      for (let index = 0; index < this.listData.length; index++) {
        let element = this.listData[index];
        if (element.Id === Id) {
          element.SupplementDetailEmail = value.split("/")[2];
          element.SupplementDetailPersonnelId = this.userList.filter(
            (item) => item.value === value
          )[0].did;
          break;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.step1-dlp {
  :deep(.ant-table) {
    .ant-table-body {
      margin-left: 0;
    }
    .ant-table-footer {
      background-color: #fff;
      padding: 0;
      .ant-btn {
        width: 100px;
      }
    }
  }
}
</style>